<template>
  <div>
    <div class="title1">
      天车连接状态
    </div>
    <div class="pos-2 d-flex ">
          <div class="card card-r">
            <CardBody label="状态" :value="wsStore?.CSStatus ? '正常' : '错误'" name="status"></CardBody>
          </div>
          <div class="card card-r">
            <CardBody label="X轴目前位置" :value="wsStore?.CSPositionX" name="tx"></CardBody>
          </div>
          <div class="card card-r">
            <CardBody label="Y轴目前位置" :value="wsStore?.CSPositionY" name="ty"></CardBody>
          </div>
          <div class="card card-r">
            <CardBody label="X轴目前速度" :value="wsStore?.CSSpeedX" name="sx"></CardBody>
          </div>
          <div class="card">
            <CardBody label="Y轴目前速度" :value="wsStore?.CSSpeedY" name="sy"></CardBody>
          </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import CardBody from './children/CardBody.vue'
import { useWSStore } from "@/stores/common.js";

const baseForm = reactive({
  speed: 10,
  accelerate: 500,
  decelerate: 500
})
let wsStore = ref()

onMounted(() => {
   wsStore = useWSStore();
  
})
</script>

<style lang="scss" scoped>
.pos-2 {
  margin-left: 5em;
  width: 90%;
  // padding: 2.5em;
}
.card-body {
  padding: 1.25rem;
}

.d-flex {
  display: flex;
}
.card-r {
  margin-right: 1rem;
}
</style>